<html lang="zh-cn">
<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="Guo Yinxin">

	<link rel="shortcut icon" href="icons/monitor.ico">

	<!-- 框架皮肤 -->
	<link href="css/flat-ui.css" rel="stylesheet">
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<title>海洋观测系统运行状态监控</title>

	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<!-- Slider bar hover color set -->
	<link href="css/bootstrap.css" rel="stylesheet">

	<!-- Dashboard  -->
	<link href="css/dashboard.css" rel="stylesheet">

	<!-- Kendo UI CSS -->
	<link href="style/kendo.common.min.css" rel="stylesheet">
	<link href="style/kendo.default.min.css" rel="stylesheet">
	<link href="css/kendo.dataviz.min.css" rel="stylesheet">
	<link href="css/kendo.dataviz.default.min.css" rel="stylesheet">

	<!-- Modal -->
	<link href="css/bootstrap-modal.css" rel="stylesheet">
	<link href="css/bootstrap-responsive.css" rel="stylesheet">

	<!-- Modal CSS -->
	<style type="text/css">
		body.modal-open,
		.modal-open .navbar-fixed-top,
		.modal-open .navbar-fixed-bottom
		{
			margin-right: 0;
		}
		.modal
		{
			left: 50%;
			bottom: auto;
			right: auto;
			padding: 0;
			width: 500px;
			margin-left: -250px;
			background-color: #ffffff;
			border: 1px solid #999999;
			border: 1px solid rgba(0, 0, 0, 0.2);
			border-radius: 6px;
			-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
			box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
			background-clip: padding-box;
		}
		.modal.container
		{
			max-width: none;
		}
	</style>
</head>

<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container-fluid" style="background-color:#0A64A4">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="brand" href="index.html" style="padding-left:20px">
				<img alt="监控icon" src="icons/monitor_48.png">
				<span style="font-size:26px;color:#ffffff;vertical-align:middle">海洋观测系统运行状态监控</span>
			</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav navbar-right">
				<!--<li><a id="setting" href="#responsive" data-toggle="modal"><span class="icon-cogs"></span>&nbsp;设置</a></li>-->
				<li><a id="message" href="#responsive" data-toggle="modal"><span class="icon-envelope"></span>&nbsp;消息</a></li>
				<li><a id="about" href="#responsive" data-toggle="modal"><span class="icon-question-sign"></span>&nbsp;关于</a>
				</li>
				<li class="dropdown">
					<a href="#user" class="dropdown-toggle" data-toggle="dropdown">
						<span class="icon-user"></span>
						<span id="loginName">&nbsp;用户</span>
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu">
						<li><a id="account" href="#responsive" data-toggle="modal"><i class="icon-user"></i>&nbsp;账户</a></li>
						<li class="divider"></li>
						<li><a href="login.html" onclick="logout()"><i class="icon-off"></i>&nbsp;退出</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</div>

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1 sidebar" style="background-color:#2E3538;font-family:'微软雅黑'">
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="index.html">
						<span class="icon-dashboard icon-2x" style="color:#dfdfdf;"></span>
						<span style="font-size:18px; color:#dfdfdf;">仪表盘</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="file.html">
						<span class="icon-file-text icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf;">&nbsp;文件</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="server.html">
						<span class="icon-tasks icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf;">服务器</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="cpu.html">
						<span class="icon-circle-blank icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">&nbsp;CPU</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="memory.html">
						<span class="icon-ticket icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">内存</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="disk.html">
						<span class="icon-hdd icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">&nbsp;磁盘</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li class="active">
					<span class="glow"></span>
					<a href="network.html">
						<span class="icon-globe icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf;">&nbsp;网络</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="database.html">
						<span class="icon-calendar icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">数据库</span>
					</a>
				</li>
			</ul>
		</div>

		<div class="col-sm-10 col-sm-offset-2 col-md-10 col-md-offset-2 col-lg-11 col-lg-offset-1 main">
			<ul class="breadcrumb">
				<li><a href="index.html">首页</a>
				</li>
				<li class="active">网络
				</li>
			</ul>
			<div class="row placeholders">
				<div class="col-sm-12 col-md-12 col-lg-12" id="netState" style="padding-left:30px"></div>
			</div>
		</div>
	</div>
</div>
<hr>
<footer class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:20px">
	<p style="text-align:center">Copyright © 2014 ShangHai Ocean University * Institute For Digital Ocean . All Rights
		Reserved.</p>
</footer>
</div>

<!-- Modal Definitions (tabbed over for <pre>) -->
<div id="responsive" class="modal fade" tabindex="-1" data-width="760" style="display: none;">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h4 id="responsiveTitle" class="modal-title" style="text-align:center;font-weight:bold;"></h4>
	</div>
	<div class="modal-body">
		<div class="row">
			<div id="responsiveBody">// class="col-md-offset-1 col-md-10">

			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
		<!--<button type="button" class="btn btn-primary">Save changes</button>-->
	</div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- Modal JS -->
<script src="js/bootstrap-modalmanager.js"></script>
<script src="js/bootstrap-modal.js"></script>

<!-- Kendo UI -->
<script src="js/kendo.dataviz.min.js"></script>
<script src="js/kendo.web.min.js"></script>
<script src="js/kendo.all.min.js"></script>


<script>
	//全局变量声明
	//Server URL
	//    var serverURL = "http://192.168.182.48:8080/api/sql?sql=";
	var serverURL = "http://202.121.66.51:8083/api/sql?sql=";
	//ServerInfo
	var serverCPUInfo;
	//LoopTime
	var loopTime = 5000;
	//DataLimitNumber
	var dataLimitNum = 200;
	//ChartAxisInterval
	var steps = 10;
	//ChartHeight
	var chartHeight = 300;


	//Responsive <a> 的点击监听事件
	$('a').click(function (e)
	{
		var title = document.getElementById("responsiveTitle");
		var body = document.getElementById("responsiveBody");
		while (body.childNodes.length)
		{
			body.removeChild(body.firstChild);
		}
		console.log(e.target.id);
		body.className = "col-md-offset-1 col-md-10";
//        var resp = document.getElementById("responsive");
//        resp.dataset.width = "760";
//        console.log("target ID:"+e.target.id+"  "+ e.currentTarget);
		switch (e.target.id)
		{
			case "about":
				title.innerText = "关于“海洋观测系统运行状态监控”";
				bodyAbout(body);
				break;
			case "message":
				title.innerText = "消息";
				bodyMessage(body);
				break;
			case "setting":
				title.innerText = "设置";
				bodySetting(body);
				break;
			case "account":
				title.innerText = "账户信息";
				bodyAccount(body);
				break;
			default :
				title.innerText = "Responsive Title";
		}
	});

	// About Body function
	function bodyAbout(fatherDiv)
	{
		var h4 = document.createElement("h4");
		h4.innerText = "介绍：";
		fatherDiv.appendChild(h4);
		var para = document.createElement("p");
		para.innerText = "海洋观测系统运行状态监控是海洋公益性行业科研专项项目“海洋观测系统运行状态监控技术研究与示范”的子项目之一。" +
				"        该系统由国家海洋局东海分局信息中心与上海海洋大学合作研究开发，研发成员有：郭颖新，季丽伟，韦躐晟等。";
		fatherDiv.appendChild(para);
	}
	// Message Body function
	function bodyMessage(fatherDiv)
	{
		var messageDiv = document.createElement("div");
		messageDiv.id = "messageDiv";
		fatherDiv.className = "col-md-12";
		fatherDiv.appendChild(messageDiv);

		var messageInfoSql = "select * from messageInfo group by ID desc limit 200";
		var messageUrl = serverURL + messageInfoSql;
		$.ajax({
			url: messageUrl, //请求的url地址
			dataType: "json", //返回格式为json
			async: true, //请求是否异步，默认为异步，这也是ajax重要特性
			//data:{"id":"value"},    //参数值
			type: "GET", //请求方式
			beforeSend: function ()
			{
				//请求前的处理
			},
			success: function (req)
			{
				//请求成功时处理
				for (var i in req)
				{
					req[i].DateTime = req[i].DateTime.replace("T", " ");
				}
				$("#messageDiv").kendoGrid({
					dataSource: {
						data: req,
						pageSize: 10
					},
					pageable: {
						refresh: true,
						pageSizes: true,
						buttonCount: 5
					},
					navigatable: true,
//                    height: 430,
					scrollable: {
						virtual: true
					},
					sortable: true,
					columns: [{
						field: "ID",
						title: "ID",
						width: 10
					}, {
						field: "ServerID",
						title: "Server",
						width: 20
					}, {
						field: "Aspect",
						title: "方面",
						width: 30
					}, {
						field: "Content",
						title: "内容",
						width: 80
					}, {
						field: "DateTime",
						title: "时间",
						width: 45
					}]
				});
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}
	// Setting Body function
	function bodySetting(fatherDiv)
	{

	}
	// Account Body function
	function bodyAccount(fatherDiv)
	{
		var userCount = document.createElement("div");
		userCount.id = "userCount";
		fatherDiv.appendChild(userCount);

		var userInfoSql = "select * from user where UserName=\"" + getCookie("loginUser") + "\"";
		var userUrl = serverURL + userInfoSql;
		$.ajax({
			url: userUrl, //请求的url地址
			dataType: "json", //返回格式为json
			async: true, //请求是否异步，默认为异步，这也是ajax重要特性
			//data:{"id":"value"},    //参数值
			type: "GET", //请求方式
			beforeSend: function ()
			{
				//请求前的处理
			},
			success: function (req)
			{
				//请求成功时处理
				$("#userCount").kendoGrid({
					dataSource: {
						data: req
					},
					navigatable: true,
//                    height: 430,
					scrollable: {
						virtual: true
					},
					sortable: true,
					columns: [{
						field: "UserName",
						title: "用户名",
						width: 50
					}, {
						field: "Passwords",
						title: "密码",
						width: 50
					}, {
						field: "Level",
						title: "权限等级",
						width: 40
					}, {
						field: "RegistTime",
						title: "注册时间",
						width: 80
					}, {
						field: "ID",
						title: "ID",
						width: 20
					}]
				});
			},
			complete: function ()
			{
				//请求完成的处理
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}

	//创建多线图表
	function createMultiLineChart(chartID, sourceData)
	{
		var tempID1 = "#" + chartID + "1";
		var tempID2 = "#" + chartID + "2";
		$(tempID1).kendoChart({
			dataSource: sourceData,
			title: {
				text: "网络流量监控"
			},
			legend: {
				position: "top"
			},
			chartArea: {
				height: chartHeight
			},
			seriesDefaults: {
				type: "line",
				style: "smooth"
			},
			transitions: false,//重绘：false
			series: [{
				field: "UpLoagFlux",
				name: "发送速率",
				categoryField: "DataTime",
				color: "#428bca"
			}, {
				type: "area",
				field: "DownLoadFlux",
				name: "接收速率",
				categoryField: "DataTime",
				color: "#00ff00"
			}],
			categoryAxis: {
				field: "DataTime",
				labels: {
					step: steps,
					dateFormats: {}
				},
				type: "date",
				crosshair: {
					visible: true
				},
				baseUnit: "minutes",
				justified: false
			},
			valueAxis: {
				labels: {
					format: "{0}kb/s"
				}
			},
			tooltip: {
				visible: true,
				shared: true,
				format: "N0"
//                color:"#0000ff"
			}
		});
		$(tempID2).kendoChart({
			dataSource: sourceData,
			title: {
				text: "网络丢包数监控"
			},
			legend: {
				position: "top"
			},
			chartArea: {
				height: chartHeight
			},
			seriesDefaults: {
				type: "line",
				style: "smooth"
			},
			transitions: false,//重绘：false
			series: [{
				field: "InPacketLoss",
				name: "发送丢包数",
				categoryField: "DataTime",
				color: "#a9a9a9"
			}, {
				type: "area",
				field: "OutPacketLoss",
				name: "接收丢包数",
				categoryField: "DataTime",
				color: "#ffff00"
			}],
			categoryAxis: {
				field: "DataTime",
				labels: {
					step: steps,
					dateFormats: {}
				},
				type: "date",
				crosshair: {
					visible: true
				},
				baseUnit: "minutes",
				justified: false
			},
			valueAxis: {
				labels: {
					format: "{0}个"
				}
			},
			tooltip: {
				padding: {
					right: 10
				},
				visible: true,
				shared: true,
				format: "N0"
//                template:"#= category # 值: #= value #"
			}
		});
	}

	//初始化多线表数据
	function initMultiLineData(serverID)
	{
		var netSQL = "select * from NetFluxInfo where ServerID=" + serverID + " order by ID desc limit " + dataLimitNum;
		var netURL = serverURL + netSQL;
		var ajInitMultiData = $.ajax({
			url: netURL,
			type: 'get',
			dataType: 'json',
			success: function (data)
			{
				//Add panel
				var serverPanel = document.createElement("div");
				serverPanel.className = "panel panel-primary";
				var panelHead = document.createElement("div");
				panelHead.className = "panel-heading";
				panelHead.innerHTML = "Server " + serverID + " 网络";
				serverPanel.appendChild(panelHead);
				var panelBody = document.createElement("div");
				panelBody.className = "panel-body";
				serverPanel.appendChild(panelBody);

				//Add netLineChart1
				var div0 = document.createElement("div");
				div0.className = "col-sm-6 col-md-6 col-lg-6 placeholder";
				var div1 = document.createElement("div");
				div1.id = "Server" + serverID + "netFlux1";
				div0.appendChild(div1);
				panelBody.appendChild(div0);

				//Add netLineChart2
				var div2 = document.createElement("div");
				div2.className = "col-sm-6 col-md-6 col-lg-6 placeholder";
				var div3 = document.createElement("div");
				div3.id = "Server" + serverID + "netFlux2";
				div2.appendChild(div3);
				panelBody.appendChild(div2);

				var element = document.getElementById("netState");
				element.appendChild(serverPanel);

				data.reverse();
				for (var index in data)
				{
//                    data[index].DataTime =data[index].DataTime.substr(11,8);
					data[index].DataTime = data[index].DataTime.replace("T", " ");
				}
				var chartID = "Server" + serverID + "netFlux";
				createMultiLineChart(chartID, data);
			},
			error: function ()
			{
				alert("数据获取失败，请检查网络！");
			}
		});
	}

	//更新LineChart
	function updateChartData(serverID)
	{
		var netSQL = "select * from NetFluxInfo where ServerID=" + serverID + " order by ID desc limit 1";
		var netURL = serverURL + netSQL;
		var updateChartID1 = "#Server" + serverID + "netFlux1";
		var updateChartID2 = "#Server" + serverID + "netFlux2";
//        var updateTableID = "#Server"+serverID+"netTable";
		$.ajax({
			url: netURL,
			type: 'get',
			dataType: 'json',
			success: function (data)
			{
				if ((data.length > 0) && ($(updateChartID1).data("kendoChart").dataSource.at(dataLimitNum - 1).ID != data[0].ID))
				{
					//Update chart
					var chart1 = $(updateChartID1).data("kendoChart");
					var firstChartData1 = chart1.dataSource.at(0);
					chart1.dataSource.remove(firstChartData1);
//                    data[0].DataTime =data[0].DataTime.substr(11,8);
					data[0].DataTime = data[0].DataTime.replace("T", " ");
					chart1.dataSource.add(data[0]);

					var chart2 = $(updateChartID2).data("kendoChart");
					var firstChartData2 = chart2.dataSource.at(0);
					chart2.dataSource.remove(firstChartData2);
//                    data[0].DataTime =data[0].DataTime.substr(11,8);
					data[0].DataTime = data[0].DataTime.replace("T", " ");
					chart2.dataSource.add(data[0]);
				}
			},
			error: function ()
			{
				alert("数据获取失败，请检查网络！");
			}
		});
	}

	//定时更新
	function loopChartData()
	{
		for (var i in serverCPUInfo)
		{
			updateChartData(serverCPUInfo[i].ServerID);
		}
		setTimeout("loopChartData()", loopTime);
	}

	// Get Cookie Function
	function getCookie(key)
	{
		var arr = document.cookie.match(new RegExp("(^|)" + key + "=([^;]*)(;|$)"));
		if (arr != null)
		{
			return unescape(arr[2]);
		}
		return null;
	}
	// Delete Cookie
	function deleteCookie(key)
	{
		var exp = new Date();
		exp.setTime(exp.getTime() - 1);
		var cVal = getCookie(key);
		if (cVal != null)
		{
			document.cookie = key + "=" + cVal + ";expires=" + exp.toGMTString();
		}
	}
	// Logout function
	function logout()
	{
		deleteCookie("loginUser");
	}

	//Script Ready Function
	$(document).ready(function ()
	{
		if (!getCookie("loginUser"))
		{
			window.location = "login.html";
		}
		else
		{
			//Init username from cookie
			document.getElementById("loginName").innerText = " " + getCookie("loginUser");
			var serverInfoSql = "select ServerID from server";
			var serverInfoURL = serverURL + serverInfoSql;
			$.ajax({
				url: serverInfoURL,
				type: 'get',
				dataType: 'json',
				success: function (data)
				{
					serverCPUInfo = data;
					for (var i in data)
					{
						initMultiLineData(data[i].ServerID);
					}
					loopChartData();
				},
				error: function ()
				{
					alert("数据获取失败，请检查网络！");
				}
			});
		}
	});

</script>
</body>
</html>
